<template>
  <div class="home">
    <div class="content">
      <!-- 1.头部 -->
      <div class="header">
        <div class="text">外卖</div>
        <div class="location">
          <van-icon name="location-o" />
          <span>jason课程</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 2.主体区域 -->
      <div class="main">
        <div class="main-bg">
          <div class="search">
            <input type="text">
            <div class="search-text">搜索</div>
          </div>
          <div class="sort">
            <div class="big-sort">
              <!-- 阿里巴巴 -->
              <div v-for="(item,index) in big_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                   <use :xlink:href="`#${item.icon}`"></use>
                 </svg>
                   {{item.name}}
              </div>
            </div>
            <div class="small-sort">
                 <div v-for="(item, index) in small_sort" :key="index">
                  <svg class="icon" aria-hidden="true">
                     <use :xlink:href="`#${item.icon}`"></use>
                   </svg>
                     {{ item.name }}
                </div>
            </div>
          </div>
        </div>
        <!-- 标签页 -->
        <!--  v-model:active="active" -->
        <van-tabs  v-model="active" class="van-tabs">
          <van-tab v-for="(item,index) in centent_nav_list" :key="index"
           :title="item.tab">
           <NavListVue :navList="item.data"/>
          </van-tab>
         </van-tabs>
      </div>

    </div>
    <!-- 导航 -->
    <Footer />

  </div>
</template>


<script>
import { onMounted, reactive,ref,toRefs } from 'vue';
import Footer from '../../components/Footer.vue';
import NavListVue from './components/NavList.vue';
import { getApiHomeData } from '../../api/api';

export default {
  components:{Footer, NavListVue },
  setup(){
    let data = reactive({
      big_sort: [],
      small_sort: [],
      centent_nav_list: [],
    })
    const active = ref(0)
    const getHomeData = () => {
      // 请求； getApiHomeData()方法： 获取首页的所有数据
      getApiHomeData().then((res) => {
        data.big_sort = res.big_sort;
        data.small_sort = res.small_sort;
        data.centent_nav_list = res.centent_nav_list;
      });
    }
    // 是一个生命周期钩子函数，用于在组件挂载到 DOM 上之后执行一些操作。
    onMounted(()=>{
      getHomeData()
    })
    return {
      ...toRefs(data), active
    }
  }
}

// axios.get('/home/getHomeData').then((res)=>{
//   console.log(res);
//   const {code,homeData} = res.data
//   if(code === 200){
//     data.small_sort = homeData.small_sort
//     data.big_sort = homeData.big_sort
//     data.centent_nav_list = homeData.centent_nav_list
//   }
// })
</script>

<style lang="less" scoped>
.home{
  display: flex;
  font-size: 12px;
  // 纵向轴
  flex-flow: column;
  height: 100%;
  .content{
    flex: 1;
    overflow-y: auto;
    .header{
      background-image: linear-gradient(#ffc400, #fff);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:  20px 20px 40px 20px;
     .text {
        font-size: 20px;
        font-weight: 600;
      }
      .location {
        span {
          margin: 0 5px;
        }
        font-size: 14px;
      }
    }
    .main{
      margin-top: -30px;
      .main-bg{
        background-image: linear-gradient(#fff, #f5f5f5);
        padding: 10px 20px 0px 20px;
        border-radius: 30px 30px 0 0;
        .search{
          position: relative;
          input{
            width: 100%;
            border: 1px solid #ffc400;
            border-radius: 20px;
            height: 30px;
          }
          .search-text{
            position: absolute;
            background-color: #ffc400;
            right: -6px;
            top: 1px;
            width: 50px;
            height: 32px;
            border-radius: 16px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
          }
        }
        .sort{
          padding: 20px 0;
          // 第一行icon
          .big-sort {
            display: flex;
            div {
              flex: 1;
              display: flex;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              .icon {
                width: 50px;
                height: 50px;
                margin-bottom: 5px;
              }
            }
          }
          // 第二行icon
           .small-sort {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            div {
              display: flex;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              width: 20%;
            }
            .icon {
              width: 30px;
              height: 30px;
              margin: 10px;
            }
          }
        }
      }
      // 标签页
      .van-tabs{
        padding: 0 20px 10px;
      }
      
    }
  }
}

// 标签页的圆角：穿透
/deep/ .van-tabs__wrap {
  border-radius: 10px;
}

</style>